<template>
	<div class="pages">
		<div class="item_detail">
			<div class="top">
				<div class="item1">订单流程</div>
				<div class="item2">
					<el-button type="primary" @click="" size="small" @click="$router.go(-1)">返回</el-button>
				</div>
			</div>
			<el-steps :active="is_active" align-center>
				<el-step title="合同通过"
					:description="dataForm.coupons.hetong_num?dataForm.coupons.create_time:''"></el-step>
				<el-step title="配货中"
					:description="dataForm.order_info.pay?dataForm.order_info.pay.pay_end_time:''"></el-step>
				<el-step title="已发货" :description="this.dataForm.order.send_time"></el-step>
				<el-step title="验收" :description="dataForm.order_info.shouhuo"></el-step>
			</el-steps>
		</div>
		<div class="item_detail">
			<div class="top">
				<div class="item1">订单信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">订单号</td>
						<td>{{dataForm.order.order_sn}}</td>
						<td class="tit">订单状态</td>
						<td><span>{{getStateName(dataForm.order.status)}}</span></td>
						<td class="tit">创建时间</td>
						<td>{{dataForm.order.create_time}}</td>
					</tr>
					<tr v-if="dataForm.order.send_time">
						<td class="tit">发货信息</td>
						<td>{{dataForm.order.send_text}}</td>
						<td class="tit">发货时间</td>
						<td>{{dataForm.order.send_time}}</td>
						<td class="tit">发货附件</td>
						<td><el-button type="primary" size="small" v-if="dataForm.order.send_fujian"><el-link
									:href="url+dataForm.order.send_fujian" target="_blank" :underline="false"
									style="color: #fff;">点击查看</el-link></el-button></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail">
			<div class="top">
				<div class="item1">企业信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">企业名称</td>
						<td>{{dataForm.order_info.corp_name}}</td>
						<td class="tit">所在地区</td>
						<td>{{CodeToText[dataForm.order_info.corp_provinceId]+CodeToText[dataForm.order_info.corp_cityId]+CodeToText[dataForm.order_info.corp_areaId]}}
						</td>
						<td class="tit">企业实际住所</td>
						<td>{{dataForm.order_info.corp_address}}</td>
					</tr>
					<tr>
						<td class="tit">联系人</td>
						<td>{{dataForm.order_info.corp_contact}}</td>
						<td class="tit">联系电话</td>
						<td>{{dataForm.order_info.corp_mobile}}</td>
						<td class="tit">营业执照</td>
						<td>
							<div v-if="dataForm.order_info.corp_thumb">
								<el-image style="width: 60px; height: 60px" :src="url+dataForm.order_info.corp_thumb"
									:preview-src-list="srcList">
								</el-image>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail">
			<div class="top">
				<div class="item1">需求信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">需求类型</td>
						<td>{{dataForm.order.level==1?'设计研发需求':dataForm.order.level==2?'物资采购需求':'加工制造需求'}}</td>
						<td class="tit">需求名称</td>
						<td>{{dataForm.order.title}}</td>
						<td class="tit">企业名称</td>
						<td>{{dataForm.order_info.corp_name}}</td>
					</tr>
					<tr>
						<td class="tit">联系人</td>
						<td>{{dataForm.order.contact}}</td>
						<td class="tit">联系电话</td>
						<td :colspan="dataForm.order.level==2?3:1">{{dataForm.order.mobile}}</td>
						<td class="tit" v-if="dataForm.order.level==1||dataForm.order.level==3">项目描述</td>
						<td v-if="dataForm.order.level==1">{{dataForm.order.content}}</td>
						<td v-if="dataForm.order.level==3">{{dataForm.order.xiangmu}}</td>
					</tr>
					<tr v-if="dataForm.order.level==2">
						<td class="tit">物资名称</td>
						<td>{{dataForm.order.wuzi}}</td>
						<td class="tit">期望交付时间</td>
						<td>{{dataForm.order.jiaofu_time}}</td>
						<td class="tit">型号和规则</td>
						<td>{{dataForm.order.xinghao}}</td>
					</tr>
					<tr v-if="dataForm.order.level==2">
						<td class="tit">采购数量</td>
						<td colspan="5">{{dataForm.order.c_num}}</td>
					</tr>

					<tr v-if="dataForm.order.level==3">
						<td class="tit">需要完成时间</td>
						<td>{{dataForm.order.end_time}}</td>
						<td class="tit">需求说明</td>
						<td>{{dataForm.order.jiagong}}</td>
						<td class="tit">图纸</td>
						<td>
							<el-button type="primary" size="small" v-if="dataForm.order.thumb"><el-link
									:href="url+dataForm.order.thumb" target="_blank" :underline="false"
									style="color: #fff;">点击查看</el-link></el-button>
						</td>
					</tr>
					<tr v-if="dataForm.order.level==3">
						<td class="tit">数量</td>
						<td colspan="5">{{dataForm.order.j_num}}</td>
					</tr>

					<tr v-if="dataForm.order_info.xiuqiu_shenhe">
						<td class="tit">审核人</td>
						<td>
							<span
								v-if="dataForm.order_info.xiuqiu_shenhe">{{dataForm.order_info.xiuqiu_shenhe.admin_name}}</span>
						</td>
						<td class="tit">审核时间</td>
						<td colspan="3"><span
								v-if="dataForm.order_info.xiuqiu_shenhe">{{dataForm.order_info.xiuqiu_shenhe.create_time}}</span>
						</td>
					</tr>
					<tr v-if="dataForm.order_info.xiuqiu_bohui">
						<td class="tit">审核人</td>
						<td>
							<span
								v-if="dataForm.order_info.xiuqiu_bohui">{{dataForm.order_info.xiuqiu_bohui.admin_name}}</span>
						</td>
						<td class="tit">审核时间</td>
						<td><span
								v-if="dataForm.order_info.xiuqiu_bohui">{{dataForm.order_info.xiuqiu_bohui.create_time}}</span>
						</td>
						<td class="tit">驳回原因</td>
						<td style="color: red;" v-if="dataForm.order_info.xiuqiu_bohui">
							{{dataForm.order_info.xiuqiu_bohui.cause}}
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail" v-if="dataForm.order_info.factory_name">
			<div class="top">
				<div class="item1">工厂信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">工厂名称</td>
						<td>{{dataForm.order_info.factory_name}}</td>
						<td class="tit">工厂地址</td>
						<td>{{dataForm.order_info.factory_address}}</td>
						<td class="tit">联系人</td>
						<td>{{dataForm.order_info.factory_contact}}</td>
					</tr>
					<tr v-if="dataForm.order_info.judan && dataForm.order.status=='-2'">
						<td class="tit">联系电话</td>
						<td>{{dataForm.order_info.factory_mobile}}</td>
						<td class="tit">拒单原因</td>
						<td colspan="3" style="color:red;">{{dataForm.order_info.judan.cause}}</td>
					</tr>
					<tr v-else>
						<td class="tit">联系电话</td>
						<td colspan="5">{{dataForm.order_info.factory_mobile}}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail" v-if="dataForm.coupons&&dataForm.coupons.hetong_num">
			<div class="top">
				<div class="item1">创制券信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">合同金额(元)</td>
						<td><span v-if="dataForm.coupons">{{dataForm.coupons.hetong_num}}</span></td>
						<td class="tit">服务费用(元)</td>
						<td><span v-if="dataForm.coupons">{{dataForm.coupons.fuwu_num}}</span></td>
						<td class="tit">创制券申请额度(元)</td>
						<td><span v-if="dataForm.coupons">{{dataForm.coupons.coupons_num}}</span></td>
					</tr>
					<tr>
						<td class="tit">合同文件</td>
						<td>
							<div v-if="dataForm.coupons">
								<el-button type="primary" size="small" v-if="dataForm.coupons.thumb"><el-link
										:href="url+dataForm.coupons.thumb" target="_blank" :underline="false"
										style="color: #fff;">打开</el-link></el-button>
							</div>
						</td>
						<td class="tit">申请时间</td>
						<td><span v-if="dataForm.coupons">{{dataForm.coupons.create_time}}</span></td>
						<td class="tit">审核人</td>
						<td>
							<span
								v-if="dataForm.order_info.quan_shenhe">{{dataForm.order_info.quan_shenhe.admin_name}}</span>
						</td>
					</tr>
					<tr>
						<td class="tit">审核时间</td>
						<td><span
								v-if="dataForm.order_info.quan_shenhe">{{dataForm.order_info.quan_shenhe.create_time}}</span>
						</td>
						<!-- 						<td class="tit">审核状态</td>
						<td><el-tag type="success"></el-tag></td> -->
						<td class="tit">备注信息</td>
						<td colspan="3"></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail" v-if="dataForm.order_info.pay">
			<div class="top">
				<div class="item1">打款信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">打款凭证</td>
						<td><el-button type="primary" size="small" v-if="dataForm.order.payment_voucher">
								<el-link :href="url+dataForm.order.payment_voucher" target="_blank" style="color: #fff;"
									:underline="false">点击查看</el-link>
							</el-button></td>
						<td class="tit">上传时间</td>
						<td><span v-if="dataForm.order_info.pay">{{dataForm.order_info.pay.pay_time}}</span></td>
						<td class="tit">确认时间</td>
						<td><span v-if="dataForm.order_info.pay">{{dataForm.order_info.pay.pay_end_time}}</span></td>
					</tr>
					<tr>
						<td class="tit">打款信息</td>
						<td colspan="3">{{dataForm.order.payment_text}}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="item_detail" v-if="dataForm.order.send_fujian">
			<div class="top">
				<div class="item1">发货信息</div>
			</div>
			<div class="item_table">
				<table width="100%" class="table">
					<tr>
						<td class="tit">发货信息</td>
						<td>{{dataForm.order.send_text}}</td>
						<td class="tit">发货附件</td>
						<td>
							<el-button type="primary" size="small" v-if="dataForm.order.send_fujian">
								<el-link :href="url+dataForm.order.send_fujian" target="_blank" style="color: #fff;"
									:underline="false">点击查看</el-link>
							</el-button>
						</td>
						<td class="tit">发货时间</td>
						<td>{{dataForm.order.send_time}}</td>
					</tr>

				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		provinceAndCityData,
		regionData,
		rovinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from "element-china-area-data"
	export default {
		data() {
			return {
				regionData,
				TextToCode,
				CodeToText,
				url: '',
				is_active: null,
				dataForm: {
					"order": {
						"id": "",
						"order_sn": "",
						"corp_id": "",
						"corp": "",
						"title": "",
						"contact": "",
						"mobile": "",
						"content": "",
						"wuzi": "",
						"jiaofu_time": "",
						"xinghao": "",
						"c_num": "",
						"end_time": "",
						"jiagong": "",
						"j_num": "",
						"thumb": "",
						"xiangmu": "",
						"status": "",
						"level": "",
						"cause": "",
						"create_time": "",
						"factory_id": "",
						"payment_voucher": "",
						"send_time": "",
						"send_text": "",
						"send_fujian": ""
					},
					"order_info": {
						"id": "",
						"order_id": "",
						"corp_id": "",
						"factory_id": "",
						"corp_name": "",
						"corp_provinceId": "",
						"corp_cityId": "",
						"corp_areaId": "",
						"corp_address": "",
						"corp_contact": "",
						"corp_mobile": "",
						"factory_name": "",
						"factory_address": "",
						"factory_contact": "",
						"factory_mobile": "",
						"xiuqiu_shenhe": {
							"admin_name": '',
							"create_time": ''
						},
						"xiuqiu_bohui": {
							"admin_name": '',
							"create_time": '',
							"cause": ''
						},
						"quan_shenhe": {
							"admin_name": '',
							"create_time": ''
						},
						"pay": {
							"pay_time": '',
							"pay_end_time": ''
						}
					},
					"coupons": {
						"hetong_num": '',
						"fuwu_num": '',
						"coupons_num": '',
						"thumb": '',
						"create_time": ''
					},
				},
				stateList: [],
				srcList: [],
				
				
			}
		},
		components: {},
		methods: {
			getStateList() {
				return new Promise((resolve, reject) => {
					this.$http.post('/api/publics/status_list', {}).then(res => {
						this.stateList = res.result
						resolve()
					})
				})

			},
			getStateName(e) {
				let aa = this.stateList.find(res => {
					console.log(res)
					return res.status == e
				})
				if(aa){
					return aa.title
				}
			},
			getinfo() {
				this.getStateList().then(res => {
					this.$loading()
					this.$http.post(`/api/order/detail`, {
						id: this.$route.query.id
					}).then(res => {
						this.$closeLoading()
						this.dataForm = {
							...this.dataForm,
							...res.result
						}
						if (this.dataForm.order_info.corp_thumb) {
							this.srcList.push(this.url + this.dataForm.order_info.corp_thumb)
						}
						if (this.dataForm.coupons.hetong_num && this.dataForm.order_info.pay && this
							.dataForm.order
							.send_time && this.dataForm.order_info
							.shouhuo) {
							this.is_active = 4
						} else if (this.dataForm.coupons.hetong_num && this.dataForm.order_info
							.pay && this.dataForm.order.send_time) {
							this.is_active = 3
						} else if (this.dataForm.coupons.hetong_num && this.dataForm.order_info
							.pay) {
							this.is_active = 2
						} else if (this.dataForm.coupons.hetong_num) {
							this.is_active = 1
						} else {
							this.is_active = null
						}
					})
				})
			},
		},
		created() {
			this.url = process.env.VUE_APP_BASE_API
			// this.getStateList()
			this.getinfo()
		}
	}
</script>
<style scoped lang="scss">
	.item_detail {
		margin-bottom: 20px;
		background-color: #fff;
		padding: 20px 25px;

		.top {
			margin-bottom: 20px;
		}
	}

	.pages {
		background: transparent;
		padding: 0;
	}

	.item_table td {
		width: 21.3% !important;
	}

	.item_table td.tit {
		width: 12% !important;
	}
</style>